<!--个人资料代码-->
<template>
    <div>
        <div class="stystyshow">
            <div class="header">基本信息</div>
            <div class="content" :class="{'content-show':show}" @click="editorShow()">
                <ul>
                    <li>
                        <div class="comment">用户头像</div>
                        <div>
                            <el-avatar :src="this.$store.getters['user/getUserHeader']"></el-avatar>
                        </div>
                    </li>
                    <li>
                        <div class="comment">用户昵称</div>
                        <div>{{user.name}}</div>
                    </li>
                    <li>
                        <div class="comment">性别</div>
                        <div>{{user.sex}}</div>
                    </li>
                    <li>
                        <div class="comment">出生日期</div>
                        <div>{{user.birthday || '未设置'}}</div>
                    </li>
                    <li>
                        <div class="comment">开启评论邮件通知</div>
                        <div>{{user.commentEmail === 0?'否':'是'}}</div>
                    </li>
                    <li>
                        <div class="comment">邮箱</div>
                        <div>{{user.email || "未设置"}}</div>
                    </li>
                    <li>
                        <div class="comment">QQ</div>
                        <div>{{user.qq || '未设置'}}</div>
                    </li>
                    <li>
                        <div class="comment">职业</div>
                        <div>{{user.job || '未设置'}}</div>
                    </li>
                    <li>
                        <div class="comment">简介</div>
                        <div>{{user.brief || '未设置'}}</div>
                    </li>
                    <li></li>
                </ul>
                <div class="editor display"><i class="el-icon-edit"></i> 编辑</div>
            </div>

            <div class="editor-content" :class="{'content-show':!show}">
                <ul>
                    <li>
                        <div class="comment">用户头像</div>
                        <div>
                            <div v-if="headerShow" @click="changeShow(false)">
                                <el-avatar :src="this.$store.getters['user/getUserHeader']"></el-avatar>
                            </div>
                            <div v-else>
                                <el-upload
                                        class="avatar-uploader"
                                        :action="actionUrl"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="comment">用户昵称</div>
                        <div>
                            <el-input v-model="tempUser.name"></el-input>
                        </div>
                    </li>
                    <li>
                        <div class="comment">性别</div>
                        <div>
                            <el-radio-group v-model="tempUser.sex">
                                <el-radio label="男">男</el-radio>
                                <el-radio label="女">女</el-radio>
                            </el-radio-group>
                        </div>
                    </li>
                    <li>
                        <div class="comment">出生日期</div>
                        <div>
                            <div class="block">
                                <el-date-picker
                                        v-model="tempUser.birthday"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="comment">开启评论邮件通知</div>
                        <div> <div>
                            <el-radio-group v-model="tempUser.commentEmail">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </div></div>
                    </li>
                    <li>
                        <div class="comment">QQ</div>
                        <div>
                            <el-input v-model="tempUser.qq"></el-input>
                        </div>
                    </li>
                    <li>
                        <div class="comment">邮箱</div>
                        <div>
                            <el-input v-model="tempUser.email"></el-input>
                        </div>
                    </li>
                    <li>
                        <div class="comment">职业</div>
                        <div><el-input v-model="tempUser.job"></el-input></div>
                    </li>
                    <li>
                        <div class="comment">简介</div>
                        <div style="width: 500px">
                            <el-input
                                    type="textarea"
                                    :autosize="{minRows:2}"
                                    placeholder="请输入内容"
                                    v-model="tempUser.brief">
                            </el-input></div>
                    </li>
                    <li></li>
                </ul>
                <el-row :gutter="24">
                    <el-col :offset="6" ><el-button plain style="margin-right: 30px" @click="editorShow">取消</el-button>
                        <el-button type="danger" @click="saveInfo">保存</el-button></el-col>
                </el-row>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "PersonData",
        data() {
            return {
                user: {},
                tempUser:{},
                headerShow: true,
                imageUrl: '',
                actionUrl: "",
                show:true,
                editorHeader:false,
            }
        },
        created() {
            this.$axios.post("/api/getInfo").then(res => {
                if (res.status === 200) {
                    this.user = res.data;
                    this.tempUser = Object.assign({},this.user);
                    this.actionUrl = "/upload/uploadfile?id=" + this.user.id;
                }
            }).catch(reason => {
            });
        },
        methods: {
            changeShow(show) {
                this.headerShow = show;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.tempUser['header'] = file.response.data;
                this.editorHeader = true;

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            editorShow(){
                this.show = !this.show;
                this.tempUser = Object.assign({},this.user);
                this.headerShow = true;
                this.imageUrl ="";

            },
            saveInfo(){
                if (!this.editorHeader && JSON.stringify(this.user) === JSON.stringify(this.tempUser)){
                    this.editorShow();
                    return;
                }
                //保存修改的信息
                this.$axios.post("/api/changeUser",this.tempUser).then(res=>{
                    if (res.status === 200) {
                        this.user = res.data;
                        this.$myMessage.success(res.message);
                        window.localStorage.setItem("token",res.token);
                        this.editorShow();
                        this.$axios.post("/api/loginuser").then(res => {
                            if (res.status === 200) {
                                this.isLogin = true;
                                this.$method.saveData(res,this.$store);
                                this.editorHeader = false;
                                location.reload();
                            }
                        }).catch(res => {
                        });
                    }
                }).catch(reason => {});
            }
        }
    }
</script>

<style scoped>
    .header {
        font-size: 18px;
        line-height: 24px;
        font-weight: 600;
        color: #2e2e2e;
        margin-bottom: 18px;
    }

    .stystyshow {
        margin-top: 30px;
        padding: 24px 16px 16px;
        background-color: #fff;
        margin-bottom: 16px;
    }

    .content {
        display: none;
        cursor: pointer;
        padding: 16px 112px 16px 25px;
        position: relative;
    }

    .content:hover {
        background-color: #f8f8f8;
    }

    .content:hover .display {
        display: inline-block;
    }

    li ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul li {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 32px;
        display: flex;
    }

    .comment {
        width: 150px;
    }

    .display {
        display: none;
    }

    .editor {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #1989fa;
    }

    .editor-content {
        display: none;
        padding: 16px 112px 16px 25px;
        position: relative;
    }

    .content-show {
        display: block;
    }

    .avatar-uploader {

    }

</style>